<script setup>
import useArticleStore from "@/stores/article/index.js";
import {ref, watch} from "vue";
import {ArrowDown, Search} from "@element-plus/icons-vue";
import useLoginStore from "@/stores/user/index.js";
import router from "@/router/index.js";
import {removeLocalStore} from "@/utils/localUser.js";
import {useRoute} from "vue-router";

const loginStore = useLoginStore()

//如果登录调用个人信息接口
if (loginStore.token) {
  loginStore.personInfoAction()
}

const articleStore = useArticleStore()
articleStore.getChannelListAction()


const searchParam = ref()

watch(searchParam, () => {
  articleStore.searchParam = searchParam.value
})

const register = () => {
  loginStore.isShow = true
  loginStore.info = '立即注册'
}

//分类显示,//切换频道数据
const currentIndex = ref(-1)
const changeBtn = async (channelId, index) => {
  //跳转首页进行搜索
  articleStore.channelId = channelId
  currentIndex.value = index
  articleStore.index = index
  //分类显示
  await articleStore.getNewsListAction(1, 10, articleStore.searchParam, articleStore.channelId)
  await router.push({
    path: "/home",
    query: {
      num: currentIndex.value
    }
  })


}

//退出登录
const logoutBtn = () => {
  removeLocalStore('token')
  //再次刷新页面
  location.reload()
  router.go(0)
}

//搜索文章列表
const searchBtn = () => {
  articleStore.getNewsListAction(1, 10, articleStore.searchParam, articleStore.channelId)
}

//发布文章
const publishArticle = async () => {
  await router.push('/publish')
}

//个人中心页面
const userInfoBtn = () => {
  router.push('/user')

}


const backHomeBtn = () => {
  router.push("/home")
}

</script>

<template>
  <div class="top-search">
    <h1 style="color: #f04142; font-size: 26px; margin-right: 10px; cursor: pointer" @click="backHomeBtn">时事资讯</h1>
    <ul class="hot">
      <li @click="changeBtn('', -1)" :class="{ active: currentIndex === -1 }">推荐</li>
      <template v-for="(item, index) in articleStore.channelList" :key="item.id">
        <li @click="changeBtn(item.id, index)" :class="{ active: currentIndex === index }">
          {{ item.channelName }}
        </li>
      </template>
    </ul>
    <div class="search-info">
      <div class="search">
        <el-input v-model="searchParam" style="width: 320px" placeholder="请输入关键字">
          <template #append>
            <el-button :icon="Search" @click="searchBtn"/>
          </template>
        </el-input>
      </div>

      <div class="right">
        <div class="publish" @click="publishArticle">
          <img src="@/assets/images/add.png"/>
          <span style="color: red">发布作品</span>
        </div>
        <div class="login">
          <el-button v-if="!loginStore.token" type="danger" @click="register">注册</el-button>
          <div class="info" v-else>
            <el-dropdown>
              <span class="link">
<!--                <img v-if="loginStore.userInfo.image" :src="loginStore.userInfo.image"/>-->
                <img :src="loginStore.personInfo.imageUrl"/>
                <!--                <span>{{ loginStore.userInfo.name }}</span>-->
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="userInfoBtn">个人主页</el-dropdown-item>
                  <!--                  <el-dropdown-item @click="personInfoBtn">作品管理</el-dropdown-item>-->
                  <el-dropdown-item @click="logoutBtn">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="less">
.top-search {
  position: fixed;
  top: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 16px rgba(54, 56, 79, .06);
  z-index: 999;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 40px;
  min-width: 1230px;


  .hot {
    display: flex;

    li {
      padding: 0 15px;
      cursor: pointer;

      &.active {
        color: rgba(240, 65, 66, 0.8);
      }
    }
  }

  .search-info {
    display: flex;

    ::v-deep(.el-input__wrapper.is-focus) {
      box-shadow: 0 0 0 1px #cccccc inset;
    }

    margin-left: 30px;

    .search {
      .el-input {
        height: 40px;

        ::v-deep(.el-icon) {
          font-size: 20px;
          color: #f04142;
        }
      }

      display: flex;
      flex-direction: column;
      align-items: center;

      h1 {
        margin-bottom: 20px;
        color: #fff;
      }

      .el-button {
        height: 40px;
      }

      :deep(.el-icon) {
        color: white;
      }
    }


    .right {
      display: flex;
      justify-content: right;
      align-items: center;

      .publish {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 40px;

        img {
          width: 18px;
          height: 18px;
          border: 1px solid red;
          border-radius: 50%;
        }


      }

      .login {
        cursor: pointer;
        margin-left: 40px;

        .el-button {
          width: 52px;
          height: 28px;
        }

        .info {
          .link {
            display: flex;
            align-items: center;
          }

          img {
            border-radius: 50%;
            width: 26px;
            height: 26px;
          }


        }
      }
    }
  }
}


</style>